  .mesage {
    padding: 29px 30px;
    min-height: calc(100vh - 320px);
    box-sizing: border-box;
    h1{
      padding-left: 10px;
      margin-bottom: 20px;
      font-size:24px;
      line-height:33px;
    }
    .mes-main{
      .mes-slide {
        margin-bottom: 20px;
        ul{
          padding-left: 10px;
          li{
           float: left;
           cursor: pointer;
           line-height: 20px;
           margin-right: 30px;
           font-size: 14px;
           border: none;
           color: $save-detail-font-color;
          }
          .active{
            position: relative;
            &::after{
              position: absolute;
              content: '';
              width: 30px;
              height: 3px;
              margin-left: -15px;
              left: 50%;
              bottom: -6px;
              background: $blue-font-color
            }
          }
         li:hover{
          color: $blue-font-color
         }
        }
      }
      .mes-content{
        .loading{
          width:30px;
          height:30px;
          margin:20% auto;
        }
        .mode-he{
          height:40px;
          line-height:40px;
          border-bottom: 1px solid $border-blue-color;
          .reade {
            float:right;
            cursor: pointer;
            i{
              cursor:pointer;
              margin-left:30px;
              font-size: 16px;
              &:hover{
                &::before{
                  color: $blue-font-color
                }
              }
            }
            &:hover{
              color:$blue-font-color
            }
          }

        }
        .record {
          line-height:70px;
          text-align:center;
        }
        .mes-body {
          li{
            position: relative;
            line-height: 40px;
            border-bottom: 1px solid $table-border-color;
            input{
              width: 16px;
            }
            em {
             margin-left:10px;
               white-space: nowrap;
           }
            span{
             display:inline-block
             max-width:650px;
             word-wrap: break-word !important;
             word-break: break-all !important;
             float:left;
           }
           i{
             &:hover{
               &::before{
                 color: $blue-font-color
               }
             }
           }
            .mess{
             float:left;
             max-width:650px;
             cursor: pointer;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
          }
            .tiveRad{
            color: $gray-font-color
            }
            .option {
              float:right;
              .delete{
                cursor: pointer;
                margin-left: 30px;
                font-size: 16px;
                color: $blue-font-color
              }
            }
          }
          li:last-child{
             border-bottom:0
          }
        }
        label {
          position: relative;
          float:left;
          margin: 0 13px 0 10px;
          .checkAll{
            float: left;
            width: 16px;
            height: 16px;
            margin: 15px 5px 0 0;
            opacity: 0;
          }
          .box{
            position: absolute;
            display: inline-block;
            left: 0;
            top: 11px;
            width:16px;
            height:16px;
            border: 1px solid $btn-unClick-border-color;
          }
          .checkAll:checked + .box{
            background: $div-border-bottom;
            &::before{
              position: absolute;
              content: '';
              left: 5px;
              top: 0;
              width: 4px;
              height: 9px;
              border-width: 1px;
              border-style: solid;
              border-color: transparent $white-color $white-color transparent;
              transform: rotateZ(45deg);
            }
          }
        }
      }
    }
  }
